<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<title>hsk</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/content.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="main"  v-cloak>
			<div class="banner">
				<div>
					<img :src="return_data.course_pic" class="introduce_pic" />
					<img :src="chapters[0].chapter_pic" class="chapter_pic" v-if="chapters[0]" />
				</div>
				<div class="v_show">
					<div class="z"></div>
					<div class="start">
						<span v-if="return_data.record_id === 0" @click="Jump(return_data.chapter[0].chapter_id)">开始学习</span>
						<span v-if="return_data.record_id != 0" @click="Jump(return_data.record_id)">继续学习</span>
					</div>
				</div>
			</div>
			<div class="menu">
				<div class="menu_act">介绍</div>
				<div>视频</div>
				<div>评价</div>
			</div>
			<div class="content">
				<div class="content_introduce">
					<div class="content_introduce_title">
						<span>{{return_data.course_name}}</span>
						<span>{{return_data.study_num}}学过</span>
					</div>
					<div class="bc"></div>
					<div class="content_introduce_content">
						<p>课程介绍</p>
						<div class="course_desc"></div>
					</div>
					<div class="content_introduce_bottom">
						<div>
							<span>￥{{return_data.course_price}}</span>
							<a :href="'order.html?course_type='+3+'&extend_type='+GetQueryString('type')"><span>购买课程</span></a>
						</div>
					</div>
				</div>
				<div class="content_video">
					<div class="content_video_title">
						<span>{{return_data.course_name}}</span>
					</div>
					<div class="bc"></div>
					<div class="content_video_list">
						<div v-for="(chapter,index) in chapters" @click="Jump(chapter.chapter_id)">
							<span v-if="chapter.chapter_id != index+1">{{chapter.chapter_no}}</span>
							<span v-if="chapter.chapter_id != index+1">时长：{{chapter.video_time}}</span>
							<span v-if="chapter.chapter_id === index+1" style="color: rgb(254, 200, 3);">{{chapter.chapter_no}}</span>
							<span v-if="chapter.chapter_id === index+1" style="color: rgb(254, 200, 3);">时长：{{chapter.video_time}}</span>
						</div>
					</div>
				</div>

				<div class="content_evaluate">
					<div class="content_evaluate_title">
						<span>{{return_data.course_name}}</span>
						<span>({{comment_num}}人已评价)</span>
					</div>
					<div class="bc"></div>
					<div class="content_evaluate_list">
						<div class="evaluate" v-for="comment in comments">
							<div class="evaluate_portrait">
								<img :src="comment.head_img" />
							</div>
							<div class="evaluate_main">
								<div>
									<span>{{comment.nick_name}}</span>
									<span v-if="comment.comment_socre === '1'">
										<img src="img/40@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
									</span>
									<span v-if="comment.comment_socre === '2'">
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
									</span>
									<span v-if="comment.comment_socre === '3'">
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
									</span>
									<span v-if="comment.comment_socre === '4'">
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/41@2x.png" />
									</span>
									<span v-if="comment.comment_socre === '5'">
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
									</span>
								</div>
								<div>
									{{comment.comment_content}}
								</div>
								<div>
									{{comment.add_time}}
								</div>
							</div>
							<div class="go">
								<a :href="'comment.html?id='+return_data.course_id"><img src="img/42@2x.png" /></a>
							</div>
						</div>
						<!--未购买,无评价-->
						<div class="no_evaluate" v-if="comment_num === '0' && return_data.have_buy === false">
							<img src="img/43@2x.png" />
							<p>暂无评价！购买课程 即可发布评价</p>
						</div>
						<!--购买，无评价-->
						<div class="no_evaluate" v-if="comment_num === '0' && return_data.have_buy === true">
							<img src="img/43@2x.png" />
							<p>暂无评价！</p>
							<a :href="'comment.html?id='+return_data.course_id"><span>去评价哦！</span></a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			getOpenId();
			var data = {
				return_data: {},
				chapters: [],
				comment_num: "0",
				comments: []
			}
			var app = new Vue({
				el: '#main',
				data: data,
				methods: {
					init: function() {
						var self = this;
						self.getInfo();
					},
					//获取课程
					getInfo: function() {
						var self = this;
						$.ajax({
							url: apiPath + 'course/get-info',
							type: 'post',
							dataType: 'json',
							data: {
								open_id: open_id,
								course_type: 3,
								extend_type: GetQueryString("type"),
								flagsign: 1
							},
							success: function(data) {
								self.return_data = data.returnData;
								self.chapters = data.returnData.chapter;
								self.getComment();
							}
						});
					},
					//获取课程评论
					getComment: function() {
						var self = this;
						$.ajax({
							url: apiPath + 'course/get-comment',
							type: 'post',
							dataType: 'json',
							data: {
								course_id: self.return_data.course_id,
								page: 1,
								limit: 15,
								flagsign: 1
							},
							success: function(data) {
								self.comment_num = data.returnData.comment_num;
								self.comments = data.returnData.comment;
							}
						});
					},
					Jump(id) {
						window.location.href = "curriculum_video.html?id=" + id + '&type=' + GetQueryString("type")
					}
				},
				mounted() {
					var self = this;
					$(".menu>div").bind("click", function() {
						var index = $(this).index();
						$(this).addClass("menu_act");
						$(this).siblings().removeClass("menu_act");
						$('.content').children('div').eq(index).show().siblings().hide();
						if(index == 1) {
							$(".v_show").show();
							$(".chapter_pic").show();
							$(".introduce_pic").hide();
						} else {
							$(".v_show").hide();
							$(".introduce_pic").show();
							$(".chapter_pic").hide()
						}
					});
					$(".menu div").eq(0).click();
					$(".course_desc").html(self.return_data.course_desc)
				},
			});
			app.init();
		</script>
	</body>

</html>